<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Le chat</title>
		<link rel="stylesheet" href="themes/base/css/reset.css" type="text/css" />
		<link rel="stylesheet" href="themes/base/css/display.css" type="text/css" />
		<!--[if IE]><script src="scripts/html5.js"></script><![endif]-->
		<!--[if lte IE 7]><script src="scripts/IE8.js" type="text/javascript"></script><![endif]-->
		<!--[if lt IE 7]><link rel="stylesheet" type="text/css" media="all" href="scripts/ie6.css"/><![endif]-->
		<link rel="shortcut icon" href="themes/base/favicon.ico">
		<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script> 
		<script type="text/javascript" src="scripts/lechat-0.5.js"></script> 
	</head>
	<body>
		<!-- Page header -->
		<header>
			<div id="headerpanel">
				<h1>Le chat</h1>
				<ul>
					<li id="headerAboutLink">
						About
					</li>
				</ul>
			</div>
		</header>
		<!-- End of page header -->

		<!-- user list -->
		<aside id="userlist">
			<div id="ulcontent">
				<header>
					<h2>Your name:
						<span id="myNameBusyIndicator"><img src="themes/base/pics/user-busy.gif" width="16" height="11" alt="busy" /></span>
					</h2>
					<input type="text" name="ulMyName" id="ulMyName" value="" />
					<ul id="ulMyNameTools">
						<li id="ulMyNameCancel">Cancel</li>
						<li id="ulMyNameChange">Change</li>
					</ul>
				</header>
				<h2>Other users:</h2>
				<ul id="otheruserslist"></ul>
				<footer></footer>
			</div>
			<div id="ultab">
				<img src="themes/base/pics/sidecat3.png" alt="cat" width="18" height="32" />
			</div>
		</aside>
		<!-- end of user list -->
		
		<!-- Send new message message box -->
		<aside id="newmsg">
			<div id="minimizebutton">_</div>
			<div class="msgcharcount">&middot;</div>
			<h2>Send a new message</h2>
			<div>
				<textarea id="msg" name="msg" cols="60" rows="1"></textarea>
			</div>
			<p>
				All messages are public!
				<button type="submit" value="1">Send</button>
			</p>
		</aside>
		<!-- End of new thread box -->
		
		<!-- loading message -->
		<aside id="loading">
			<h2>Initialising messages&nbsp;&hellip;</h2>
			<p>
				If this message does not disappear within a few seconds, 
				it either means the server is overloaded, or you have 
				<em>JavaScript</em> disabled.
			</p>
			<p class="centered">
				<img src="themes/base/pics/throbber.gif" width="50" height="50" alt="loading" />
			</p>
		</aside>
		<!-- end of loading message -->

		<!-- about message box -->
		<aside id="about">
			<div id="aboutBox">
				<h2>About LEChat</h2>
				<p>
					LEChat (short for “Local Environment Chat”) is a simple
					chat service that is designed to run directly on your
					router. That’s right, no server needed (and actually no 
					Internet connection either.
				</p>
				<p>
					To get the latest version, or if you want to contribute
					to the development, please visit the project pages
					on GitHub:
					<a href="http://saschaleib.github.com/LEChat/" target="_blank">LEChat</a>.
				</p>
				<p id="aboutBoxButtonsPara">
					<button id="aboutCloseButton">close</button>
				</p>
			</div>
		</aside>
		<!-- end of about message -->
	
		<!-- The actual content -->
		<section id="messagelist">
			<ul id="msgroot"></ul>
		</section>
		<!-- end of content -->
		
		<!-- page footer -->
		<footer>
			<p>end of message list.</p>
		</footer>
		<!-- end of page footer -->
	</body>
</html>
